import React from 'react';

import { productApi } from '@/entities/course';
import { ratingApi } from '@/entities/rating';
import { BoughtCourseTabVariants } from '@/shared/interfaces';
import { Container, Wrapper } from '@/shared/ui';
import { Header } from '@/widgets/Header';
import { useRouter } from 'next/router';

import cs from './BoughtCourse.module.scss';
import { ActionCard } from './ui/ActionCard';
import { ActiveTab } from './ui/ActiveTab';

export const BoughtCourse = () => {
  const router = useRouter();
  const { id } = router.query;
  const { data: order, isLoading } = productApi.useGetSingleOrderQuery(id as string, { skip: !id });
  const { data: rating } = ratingApi.useGetSingleProductRatingQuery(
    { ratingId: String(order?.userRatingId), productId: String(order?.items[0].productId) },
    { skip: !order?.userRatingId },
  );
  return (
    <div className={cs.container}>
      <Header className={cs.header} />
      <Wrapper className={cs.wrapper}>
        <Container className={cs.wrap}>
          <div className={cs.page}>
            <div className={cs.card}>
              <div className={cs.floating_card_container}>
                <ActionCard
                  course={order}
                  isLoading={isLoading}
                  rate={rating?.rate ?? 0}
                  tab={router.query.tab as BoughtCourseTabVariants}
                />
              </div>
            </div>
            <ActiveTab
              courseId={order?.items?.[0]?.product?.course.id || 0}
              courseTitle={order?.items?.[0].title || ''}
              productId={order?.items?.[0]?.product?.id || 0}
              ratingId={order?.userRatingId}
              tab={router.query.tab as BoughtCourseTabVariants}
            />
          </div>
        </Container>
      </Wrapper>
    </div>
  );
};
